<template>
  <div>
    <nav>
      <span @click="showSelect('kind')" v-if=" catid!=='519' ">分类</span>
      <span @click="showSelect('area')">地区</span>
      <span @click="showSelect('origin')">来源</span>
      <span @click="showSelect('acreage')">面积</span>
      <span @click="showSelect('rent')">租金</span>
      <span v-if="!!lbstoreJson.list" @click="showSelect('classify')">类型</span>
    </nav>
    <div id='bg'
         @click='closeSelect()'
         v-show='darkBg'>
      <ul id='kind' v-show="CurrentName==='kind' ">
        <!--        <li-->
        <!--          v-for="(kind,index) in kindJson.list"-->
        <!--          :key="index"-->
        <!--          :class="{'active':kindJson.selectId===index}"-->
        <!--          @click="handleSetParams('kind',kindJson,kind,index)"-->
        <!--        >{{kind.catname}}-->
        <!--        </li>-->

        <li style="padding:0px">
          <van-tree-select
            :height=400
            :items="catlist"
            :active-id.sync="activeIds"
            :main-active-index.sync="activeIndexs"
            @click-nav="handleClicknavs"
            @click-item="handleClicknavRights"
          />
        </li>


      </ul>

      <ul id="areas" v-show="CurrentName==='area' ">
        <li>
          <van-tree-select
            :height=400
            :items="items"
            :active-id.sync="activeId"
            :main-active-index.sync="activeIndex"
            @click-nav="handleClicknav"
            @click-item="handleClicknavRight"
          />
        </li>
      </ul>
      <ul id='origin' v-show="CurrentName==='origin' ">
        <li
          v-for="(origin,index) in OriginJson.list"
          @click="handleSetParams('origin',OriginJson,origin,index)"
          :class="{'active':OriginJson.selectId===index}"
        >{{origin.name}}
        </li>
      </ul>
      <ul id='acreage' v-show="CurrentName==='acreage' ">
        <li
          v-for="(acreage,index) in acreageJson.list"
          :key="acreage.val"
          @click="handleSetParams('acreage',acreageJson,acreage,index)"
          :class="{'active':acreageJson.selectId===index}"
        >{{acreage.name}}
        </li>
      </ul>
      <ul id='rent' v-show="CurrentName==='rent' ">
        <li
          v-for="(rent,index) in RentJson.list"
          :key="rent.val"
          @click="handleSetParams('rent',RentJson,rent,index)"
          :class="{'active':RentJson.selectId===index}"
        >{{rent.name}}
        </li>
      </ul>
      <ul id='classify' v-show="CurrentName==='classify' ">
        <li v-for="(lbstore,index) in lbstoreJson.list"
            :key="index"
            @click="handleSetParams(lbstoreName,lbstoreJson,lbstore,index)"
            :class="{'active':lbstoreJson.selectId===index}"
        >{{lbstore}}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import {getStore} from '../../config/mUtils'

  export default {
    name: "listNav",
    data() {
      return {
        darkBg: false,
        CurrentName: 'kind', //控制二级分类显示 默认展示分类
        kindJson: {}, //分类信息
        OriginJson: {}, //包含来源所有信息 list id name
        acreageJson: {}, // 包含面积所有信息
        RentJson: {}, //包含租金所有信息
        lbstoreJson: {
          list: []
        }, //包含类型所有信息
        lbstoreName: '',
        cityid: getStore('cityid'),
        catid: 0,
        areaid: 0,
        params: {
          cityid: '',
          catid: '',
          areaid: '',
          position: '',
          acreage: '',
          rent: '',
          streetid: '',
          lb_store: '',
          lb_qita: '',
          lb_qiu: '',
        },
        //地区选择
        items: [],
        activeId: 1,
        activeIndex: 0,
        //大类
        catlist: [],
        activeIds: 1,
        activeIndexs: 0
      }
    },
    computed: {},
    created() {
      this.initDate()
      this.handleEmitParent()
      // this.GetServerCityid()
    },
    methods: {

      //大类选择
      //分类左侧区域列表
      handleClicknavs(index) {
        // console.log(index);
        this.activeIndexs = index
      },
      //分类右侧列表
      handleClicknavRights(data) {
        // console.log(data);
        // this.handleClickAreaJson2(data.id, data.name)
        this.darkBg = !this.darkBg
        this.activeIds = data.id
        this.handleClickAreaJson3(data.id)

        // console.log(data);
      },
      //地区左侧区域列表
      handleClicknav(index) {
        // console.log(index);
        this.activeIndex = index
      },
      //右侧街道列表
      handleClicknavRight(data) {
        // console.log(data);
        this.handleClickAreaJson2(data.id, data.name)
        this.darkBg = !this.darkBg
        this.activeId = data.id
      },
      initDate() {
        //暂不做封装 因需判断返回值，参数，port
        this.cityid = this.$route.query.cityid
        this.catid = this.$route.query.catid
        //获取新地区数据
        this.$axios.post('area/areaList', this.qs.stringify({
          "token": getStore("token"),
          "cityid": this.cityid,
        })).then((res) => {
          // console.log(res.data.data);
          this.items = res.data.data
        });

        //获取新分类数据
        this.$axios.post('menu/newMenu', this.qs.stringify({
          "token": getStore("token"),
          "catid": this.catid,
        })).then((res) => {
          // console.log(res.data.data);
          this.catlist = res.data.data
        });

        //获取类型数据
        this.$axios.post('category/getType', this.qs.stringify({
          "token": getStore("token"),
          "catid": this.catid,
        })).then((res) => {
          this.lbstoreJson.list = res.data.data.value
          this.lbstoreName = res.data.data.name
        });
        //获取来源数据
        this.$axios.post('menu/personType', this.qs.stringify({
          "token": getStore("token")
        })).then((res) => {
          this.OriginJson.list = res.data.data
        });
        //获取面积数据
        this.$axios.post('menu/areaType', this.qs.stringify({
          "token": getStore("token")
        })).then((res) => {
          this.acreageJson.list = res.data.data
        });
        //获取租金数据
        this.$axios.post('menu/moneyType', this.qs.stringify({
          "token": getStore("token")
        })).then((res) => {
          this.RentJson.list = res.data.data
        });
      },
      //点击街道请求区域数据
      handleClickAreaJson2(id, name) {
        // cityid-城市ID areaid-区域ID

        if ( name === 'areaid' ) {
          this.params.areaid = id
          this.params.streetid = ''
        } else if ( name === 'cityid' ) {
          this.params.cityid = id
          this.params.areaid = ''
          this.params.streetid = ''
        } else {
          this.params.streetid = id
        }
        this.handleEmitParent()
      },

      handleClickAreaJson3(id) {
        //catid- 二级分类ID
        this.params.catid = id
        this.handleEmitParent()
      },
      //子传父组件
      handleEmitParent() {
        this.$emit('Sparams', this.params)
      },
      //name - >对应参数
      handleSetParams(name, elm, item, index) {
        //name->接口名称 elm->选择特效 item->this index->索引
        //分类传参
        if ( name === 'kind' ) {
          index === 0 ? this.params.catid = '' : this.params.catid = item.catid
          this.params.catid = item.catid
        }
        //来源传参
        if ( name === 'origin' ) {
          index === 0 ? this.params.position = '' : this.params.position = item.val
          // this.params.position = item.val
        }
        //面积传参
        if ( name === 'acreage' ) {
          index === 0 ? this.params.acreage = '' : this.params.acreage = item.val
          this.acreageJson.selectId = index
          // this.params.acreage = item.val
        }
        //类型传参
        if ( name === 'lb_store' || name === 'lb_qita' || name === 'lb_qiu' ) {
          index === 0 ? this.params[name] = '' : this.params[name] = index
        }
        //租金传参
        if ( name === 'rent' ) {
          // this.params.rent = index
          index === 0 ? this.params.rent = '' : this.params.rent = index
        }
        elm.selectId = index
        this.handleEmitParent()
      },
      showSelect(elm) {
        this.darkBg = true
        this.CurrentName = elm
      },
      closeSelect() {
        if ( this.CurrentName === "area" ) {
          return
        }

        if ( this.CurrentName == "kind" ) {
          return
        }
        this.darkBg = false
      },
    }
  }
</script>

<style scoped>
  @import url("../../assets/css/lists.css");

  .lists >>> .van-dropdown-menu {
    margin-top: 100px;
  }

  .recom-content {
    padding-top: 110px;
  }

  nav {
    border-bottom: 1px solid #f0f0f0;
  }
</style>
